<template>
	<view class="my-order bg-active-color">
		<Lines></Lines>
		<view class="order-header">
			<view class="header-item"
			v-for="(item,index) in tabList"
			:key='index'
			:class='tabIndex ===index?"active":""'
			@tap="changeTab(index)"
			>{{item.name}}</view>
		</view>
		
		<block
			v-for="(tabItem,tabI) in tabList"
			:key="tabI">
			<view v-show='tabI===tabIndex'>
				<view v-if='tabItem.list.length>0' class="order-main" :style="'height:'+clentHeight+'px;'">
					<!-- 商品 -->
					<view v-for="(k,i) in tabItem.list" :key='i'>
						<view class="order-goods">
							<view class="goods-state f-active-color">{{k.state}}</view>
							<view  class="goods-item" 
								v-for="(item,index) in k.goods_item"
								:key="index">
								<!-- 封装的组件 -->
								<orderList :item='item' :index='index'></orderList>
							</view>
						</view>
						<Lines></Lines>
						<!-- 总价-->
						<view class="totalPrice">
							订单金额; <text class="f-active-color">￥{{k.totalPrice}}</text>(包含运费￥0.00)
						</view>
						<Lines></Lines>
						<!-- 支付-->
						<view class="payment">
							<view class="payment-text f-active-color">支付</view>
						</view>
					</view>
				</view>
				
				<!-- 如果无数据-->
				<view v-else class="no-order" :style="'height:'+clentHeight+'px;'">
					<view>你还没有相关订单</view>
					<view class="no-order-home">去首页逛逛</view>
				</view>
			</view>
			
		</block>
	</view>
</template>

<script>
	import Lines from '../../components/common/Lines.vue'
	import orderList from '../../components/order/order-list.vue'
	export default {
		data() {
			return {
				//高度
				clentHeight:0,
				//当前位置
				tabIndex:0,
				tabList:[
					{
						name:"全部",
						list:[
							{
								state:"待付款",
								totalPrice:'3999.00',
								goods_item:[
									{
										imgUrl:"../../static/img/goods4.jpg",
										name:"茶叶，选取优质地带，不容错过，爆款,茶叶，选取优质地带，不容错过，爆款",
										attrs:"黑色",
										pprice:"299.0",
										num:"1"
									},
									{
										imgUrl:"../../static/img/goods3.jpg",
										name:"茶叶，选取优质地带，不容错过，爆款,茶叶，选取优质地带，不容错过，爆款",
										attrs:"黑色",
										pprice:"399.0",
										num:"1"
									}
								]
							}
						]
					},
					{
						name:"待付款",
						list:[
							
						]
					},
					{
						name:"待发货",
						list:[
							{
								state:"待发货",
								totalPrice:'3999.00',
								goods_item:[
									{
										imgUrl:"../../static/img/goods2.jpg",
										name:"茶叶，选取优质地带，不容错过，爆款,茶叶，选取优质地带，不容错过，爆款",
										attrs:"黑色",
										pprice:"299.0",
										num:"1"
									},
									{
										imgUrl:"../../static/img/goods2.jpg",
										name:"茶叶，选取优质地带，不容错过，爆款,茶叶，选取优质地带，不容错过，爆款",
										attrs:"黑色",
										pprice:"399.0",
										num:"1"
									}
								]
							}
						]
					},
					{
						name:"待收货",
					},
					{
						name:"待评价",
					},
				]
			}
		},
		components:{
			Lines,
			orderList
		},
		onReady() {
			uni.getSystemInfo({
				success:(res) =>{
					this.clentHeight = res.windowHeight -uni.upx2px(120)-this.getClientHeight();
				}
			})
		},
		methods: {
			// 顶部切换
			changeTab(index) {
				this.tabIndex = index;
			},
			//获取可视区域的高度
			getClientHeight() {
				const res = uni.getSystemInfoSync();
				const system = res.platform;
				if(system == 'ios'){
					return 44+res.statusBarHeight;
				}else if(system == 'android'){
					return 48+res.statusBarHeight;
				}else {
					return 0;
				}
				
			},
			
		}
	}
</script>

<style scoped>
.order-header{
	display: flex;
	justify-content: center;
	align-items: center;
	border-bottom: 2rps solid #F7F7F7;
}
.header-item {
	text-align: center;
	flex: 1;
	line-height: 100rpx;
}
.active {
	border-bottom: 4rpx solid #49BDFB;
}

/* 订单商品信息*/
.goods-state {
	display: flex;
	justify-content: flex-end;
	background-color: #FFFFFF;
	padding: 20rpx;
	font-size: 30rpx;
}

/* 总价样式 */
.totalPrice {
	display: flex;
	padding: 20rpx;
	background-color: #FFFFFF;
	justify-content:flex-end ;
	font-size: 24rpx;
}

.payment {
	display: flex;
	padding: 20rpx;
	background-color: #FFFFFF;
	justify-content:flex-end ;
	font-size: 24rpx;
}
.payment-text{
	border: 2rpx solid #49BDFB;
	padding: 6rpx 40rpx;
	border-radius: 30rpx;
}
/* 无数据显示的样式 */
.no-order {
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	background-color: #FFFFFF;
}
.no-order-home {
	padding: 6rpx 60rpx;
	border: 2rpx solid #49BDFB;
	border-radius: 40rpx ;
	color: #49BDFB;
}
</style>
